<template>
    <div>
      <el-card>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>付费会员卡管理</el-breadcrumb-item>
        </el-breadcrumb>

        <h3 style="text-align: left;font-size: 25px;margin-bottom: 0px">付费会员卡管理</h3>

      </el-card>
      <el-card style="margin-top: 30px">

        <div style="width: 100%">

          <h4 style="width:50%;text-align: left;font-weight: normal;margin-top: 0px;display: inline-block" >付费会员卡列表</h4>
          <div style="width:50%;display: inline-block;text-align: right">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddDialog()">新建</el-button>
          </div>
        </div>

        <el-table :data="svipList" align="center"  stript>

          <el-table-column label="会员卡名称" width="130px">
            <template slot-scope="scope">
              <div style="color:#FFAA00">
               {{scope.row.name}}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="有效时长" width="80px">
            <template slot-scope="scope">{{scope.row.duration}}个月</template>
          </el-table-column>

          <el-table-column label="价格（元）" prop="finalprice" width="100px"></el-table-column>

          <el-table-column label="划线价格（元）" prop="crossedprice" width="130px"></el-table-column>

          <el-table-column label="特权描述" prop="svipExplain" width="200px"></el-table-column>

          <el-table-column label="状态" prop="status" width="80px">
            <template slot-scope="scope">
              <div v-if="scope.row.status == true">启用</div>
              <div v-if="scope.row.status == false">停用</div>
            </template>
          </el-table-column>

          <el-table-column label="最后修改时间" prop="updatetime"></el-table-column>

            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="removeSvipById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4 , 8, 12]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>
    </el-card>

      <!--修改用戶-->

      <el-dialog
          title="编辑付费会员卡信息"
          :visible.sync="editDialogVisible"
          width="50%"
          @close="editSvipFormClose"

      >
        <div id="maxBox">

          <div id="box">
            <el-form
                :model="editSvipForm"
                :rules="editSvipFormRules"
                ref="editSvipFormRef"
                label-width="100px"
                class="demo-ruleForm"
                size="small"
            >
              <el-form-item label="会员卡名称" prop="name">
                <el-input v-model="editSvipForm.name"></el-input>
              </el-form-item>

              <el-form-item label="背景色" prop="color" style="text-align: left">
                <el-color-picker v-model="editSvipForm.color" style="width: 100px"></el-color-picker>
              </el-form-item>

              <el-form-item label="价格" prop="finalprice" style="text-align: left">
                <el-input v-model="editSvipForm.finalprice" style="width: 200px">
                  <template slot="append" >元</template>
                </el-input>
              </el-form-item>

              <el-form-item label="划线价格" prop="crossedprice" style="text-align: left">
                <el-input v-model="editSvipForm.crossedprice" style="width: 200px">
                  <template slot="append" >元</template>
                </el-input>
              </el-form-item>

              <el-form-item label="有效期" prop="duration" style="text-align: left">
                自获得之日起
                <el-input v-model="editSvipForm.duration" style="width: 80px">
                </el-input>
                个月内有效
              </el-form-item>

              <el-form-item label="续期提醒" prop="remind" style="text-align: left">
                距离到期前
                <el-input v-model="editSvipForm.remind" style="width: 80px">
                </el-input>
                天提醒
              </el-form-item>

              <el-form-item label="会员卡状态"  prop="status" style="text-align: left">
                <el-radio v-model="editSvipForm.status" :label='true'>启用</el-radio>
                <el-radio v-model="editSvipForm.status" :label="false">禁用</el-radio>
              </el-form-item>

              <el-form-item label="会员权益" prop="equity" style="text-align: left">
                <el-select v-model="svipEquityList" multiple placeholder="请选择角色">
                  <el-option :label="item.name" :value="item.id" v-for="item in equityList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="卡描述" prop="svipExplain">
                <el-input type="textarea"  v-model="editSvipForm.svipExplain" :rows="4"></el-input>
              </el-form-item>

            </el-form>
          </div>


          <div :model="editSvipForm" id="card" :style="`background-color:${cardColor}`">
            <h2 icon="el-icon-plus">{{editSvipForm.name}}</h2>
            <p>有效期：{{editSvipForm.duration}}个月</p>
            <p>{{editSvipForm.svipExplain}}</p>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSvip">确 定</el-button>
          <el-button @click="editSvipFormClose">取 消</el-button>
        </span>
      </el-dialog>



      <!--添加-->
      <el-dialog
          title="编辑付费会员卡信息"
          :visible.sync="addDialogVisible"
          width="50%"
          @close="addSvipFormClose"
      >
        <el-form
            :model="addSvipForm"
            :rules="addSvipFormRules"
            ref="addSvipFormRef"
            label-width="100px"
            class="demo-ruleForm"
            size="small"

        >
          <el-form-item label="会员卡名称" prop="name">
            <el-input v-model="addSvipForm.name"></el-input>
          </el-form-item>

          <el-form-item label="背景色" prop="color" style="text-align: left">
            <el-color-picker v-model="addSvipForm.color" style="width: 100px"></el-color-picker>
          </el-form-item>

          <el-form-item label="开卡条件" prop="finalprice" style="text-align: left">
            <el-input v-model="addSvipForm.finalprice" style="width: 200px">
              <template slot="append" >元</template>
            </el-input>
          </el-form-item>

          <el-form-item label="有效期" prop="duration" style="text-align: left">
            自获得之日起
            <el-input v-model="addSvipForm.duration" style="width: 80px">
            </el-input>
            个月内有效
          </el-form-item>

          <el-form-item label="续期提醒" prop="remind" style="text-align: left">
            距离到期前
            <el-input v-model="addSvipForm.remind" style="width: 80px">
            </el-input>
            天提醒
          </el-form-item>

          <el-form-item label="会员权益" prop="equity" style="text-align: left">
            <el-select v-model="svipEquityList" multiple placeholder="请选择会员权益">
              <el-option :label="item.name" :value="item.id" v-for="item in equityList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="卡描述" prop="svipExplain">
            <el-input type="textarea"  v-model="addSvipForm.svipExplain" :rows="4"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSvip">确 定</el-button>
        <el-button @click="addSvipFormClose">取 消</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              cardColor:'',
              pageNum: 1,
              pageSize: 2,
              svipList: [],
              total: 9,
              userName: "",
              equityList:[],
              svipEquityList:[],
              editDialogVisible: false,
              editSvipForm: {
                id:"",
                name: "",
                duration: "",
                finalprice: "",
                crossedprice: "",
                svipExplain: "",
                color: "",
                updatetime:"",
                status:"",
                remind:"",
                equityIds:""
              },
              editSvipFormRules: {
                name: [
                  { required: true, message: "请输入会员卡名称", trigger: "blur" },
                  { min: 4, max: 8, message: "名称在4-8個字符之間", trigger: "blur" }
                ],
                color:[
                  { required: true, message: "请选择颜色", trigger: "change" },
                ],
                finalprice: [
                  { required: true, message: "请输入价格", trigger: "blur" },
                  { pattern:/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "价格必须为数字", trigger: "blur" }
                ],

              },
              addDialogVisible: false,
              addSvipForm: {
                id:"",
                name: "",
                duration: "",
                finalprice: "",
                crossedprice: "",
                svipExplain: "",
                color: "",
                updatetime:"",
                status:"",
                remind:"",
                equityIds:""
              },
              addSvipFormRules: {
                name: [
                  { required: true, message: "请输入会员卡名称", trigger: "blur" },
                  { min: 4, max: 8, message: "名称在4-8個字符之間", trigger: "blur" }
                ],
                color:[
                  { required: true, message: "请选择颜色", trigger: "change" },
                ],
                finalprice: [
                  { required: true, message: "请输入价格", trigger: "blur" },
                  { pattern:/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "价格必须为数字", trigger: "blur" }
                ],
                equity: [
                  { required: true, message: "请选择权益", trigger: "blur" },
                ]
              }
            };
        },
        methods: {
          removeSvipById(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = "svip/delete?id="+id
              this.$axios.delete(url)
                  .then(res=>{
                    if (res.data.code == 101){
                      this.$message({
                        type:"success",
                        message:res.data.msg,
                        duration:1000
                      })
                      this.searchSvip();
                    }else{
                      this.$message({
                        type:"error",
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            })
          },
          addSvip(){
            this.addSvipForm.equityIds = this.svipEquityList;
            this.$refs.addSvipFormRef.validate((valid) => {
              if (valid) {
                let url = "svip/add"
                this.$axios.post(url,this.addSvipForm)
                    .then(res=>{
                      if (res.data.code == 101){
                        this.$message({
                          type:"success",
                          message:res.data.msg,
                          duration:1000
                        })
                        this.addDialogVisible = false;
                        this.$refs.addSvipFormRef.resetFields();
                        this.searchSvip();
                      }else{
                        this.$message({
                          type:"error",
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              } else {
                return false;
              }
            });
          },
          editSvip(){
            this.editSvipForm.equityIds = this.svipEquityList;
            this.$refs.editSvipFormRef.validate((valid) => {
              if (valid) {
                let url = "svip/modify"
                this.$axios.put(url,this.editSvipForm)
                    .then(res=>{
                      if (res.data.code == 101){
                        this.$message({
                          type:"success",
                          message:res.data.msg,
                          duration:1000
                        })
                        this.editDialogVisible = false;
                        this.searchSvip();
                      }else{
                        this.$message({
                          type:"error",
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              } else {
                return false;
              }
            });
          },
          editSvipFormClose(){
            this.editDialogVisible =false;
            this.svipEquityList = []
          },
          addSvipFormClose(){
            this.addDialogVisible =false;
            this.svipEquityList = [];
            this.$refs.addSvipFormRef.resetFields()
          },
          showEditDialog(svip){
            this.editSvipForm = svip;
            this.editDialogVisible = true;
            let sel = svip.equityList
            for(let res of sel){
              this.svipEquityList.push(res.id)
            }
            this.cardColor = svip.color
          },
          showAddDialog(){
            this.addDialogVisible = true;
          },


          getSvipList() {
            let url = "svip/queryByPage";
            this.$axios.get(url,{
              params:{
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if (res.data.code == 101){
                console.log(res)
                this.svipList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },
          searchSvip() {
              this.pageNum = 1;
              this.getSvipList();
          },
          handleSizeChange(newSize) {
              this.pageSize = newSize;
              this.getSvipList();
          },
          handleCurrentChange(newPage) {
              this.pageNum = newPage;
              this.getSvipList();
          },

          getEquityList(){
            let url = "equity/queryAll";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 101){
                console.log(res)
                this.equityList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },


          reloadData() {
              this.searchSvip();
              this.getSvipList();
              this.getEquityList();
          }
      },
      created() {
          this.reloadData();

      }
    };
</script>
<style lang="less" scoped>
  #card{
    width: 40%;
    color: white;
    border-radius: 5%;
    position: absolute;
    right: -10px;
    top:0;
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
  }
  #card p{
    font-size:13px
  }
  #card h2{
    font-weight: normal;
  }
  #box{
    width:60%;
  }
  #maxBox{
    position: relative;
  }
</style>